import React, { useEffect, useState } from 'react'
import { getHomeList } from '@/api/index'
import { Card, Table } from 'antd';

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '用户名',
    dataIndex: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },
]
const Home = () => {
  // 使用 getHomeList 函数获取数据
  const [tableList, setTableList] = useState([]);
  useEffect(() => {
    getHomeList({}).then(({ data }) => {
      setTableList(data.list);
    }).catch(error => {
      console.error("Error fetching home list:", error);
    });
  }, []);
  return (
    <div>
      <Card
        hoverable
        style={{ width: 240 }}
        cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style={{ height: '200px' }} />}
      >
        <div>账号:超级管理员</div>
        <div>登录时间:2025-7-15</div>
      </Card>
      <div className="bg-blue-500 text-white p-4">
        This is a Tailwind CSS styled component.
      </div>
      <div style={{ marginTop: '20px', width: '30%' }}>
        <Table rowKey={'id'} columns={columns} dataSource={tableList}></Table>
      </div>
    </div>
  )
}

export default Home